<template>
  <div class="bed-container">
    <div class="title">床位实时查询</div>
    <div class="select-contain">
       <el-select
            placeholder="请选择"
            filterable 
            v-model="select1"
            style="margin: 0 30px"
            >
              <el-option v-for="(item,index) in bedList" :key="index"
              :label="index" :value="item.address">
                <span style="float: left">{{ item.address }}</span>
                <span style="float: right; color : #8492a6;  font-size: 13px" >{{ item.location }}</span>
              </el-option>
          </el-select>

          <el-select
            placeholder="请选择"
            filterable 
            v-model="select1"
            style="margin: 0 30px"
            >
              <el-option v-for="(item,index) in bedList" :key="index"
              :label="index" :value="item.address">
                <span style="float: left">{{ item.address }}</span>
                <span style="float: right; color : #8492a6;  font-size: 13px" >{{ item.location }}</span>
              </el-option>
          </el-select>
          <el-select
            placeholder="请选择"
            filterable 
            v-model="select1"
            style="margin: 0 30px"
            >
              <el-option v-for="(item,index) in bedList" :key="index"
              :label="index" :value="item.address">
                <span style="float: left">{{ item.address }}</span>
                <span style="float: right; color : #8492a6;  font-size: 13px" >{{ item.location }}</span>
              </el-option>
          </el-select>
          <el-select
            placeholder="请选择"
            filterable 
            v-model="select1"
            style="margin: 0 30px"
            >
              <el-option v-for="(item,index) in bedList" :key="index"
              :label="index" :value="item.address">
                <span style="float: left">{{ item.address }}</span>
                <span style="float: right; color : #8492a6;  font-size: 13px" >{{ item.location }}</span>
              </el-option>
          </el-select>
    </div>
    <div class="container">
      <div class="contain" v-for="(item,index) in bedList" :key="index" 
        :class="{'red-color': item.color === 1,'blue-color': item.color === 2,'yellow-color': item.color === 3}">
        <img src="../assets/icon.png" alt="" style="display: block;">
        <span class="word" style="display: inline-block;">房间信息</span>
        <div>
          <span class="contain-title">位置:</span>
          <span class="contain-body">{{item.address}}</span>
        </div>
        <div>
          <span>区域:</span>
          <span class="contain-body">{{item.location}}</span>
        </div>
        <div>
          <span>户型:</span>
          <span class="contain-body">{{item.roomType}}</span>
        </div>
        <div>
          <span>护理等级:</span>
          <span class="contain-body">{{item.level}}</span>
        </div>
        <div>
          <span>已住老人:</span>
          <span class="contain-body">{{item.selected}}</span>
        </div>
        <div>
          <span>空余床位:</span>
          <span class="contain-body free">{{item.free}}</span>
        </div>

        <div>
          <button>查看详情</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {  
    return {
      select1: '',
      name: "bed",
      bedList: [
        {
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 2
        },
        {
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 1
        },
        {
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 3
        },
        {
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 2
        },
        {
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 3
        },{
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 1,
        },{
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 2
        },{
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 3
        },{
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 1
        },{
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 3
        },{
          address: '1栋-3层-301',
          location: 'A区域',
          roomType: '4人间',
          level: '介护',
          selected: '0',
          free: '4',
          color: 2
        },


      ]
    }
  }
}
</script>

<style scoped>
.bed-container {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  /* background: url("../assets/bed.png"); */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
}
.select-contain {
  margin: 30px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}

.select-contain .el-select {
  margin: 20px 0;
}
.title {
  border-bottom: 1px solid #87bab4;
  height: 50px;
  font-size: 24px;
  border-left: 5px solid lightskyblue;
  padding-left: 30px;
  line-height: 40px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
}

.contain {
  width: 230px;
  height: 280px;
  background-color: #d6f8f4 ;
  margin: 10px;
  padding-left: 30px;
  padding-top: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0,32,81,0.1);
}
.red-color {
  background-color: #ffe3e4

}
.blue-color {
  background-color: #d6f8f4 ;

}
.yellow-color {
  background-color: #ddecff ;
}

.word {
  font-size: 18px;
  font-weight: 600;
}

.contain-title {
  color: rgb(36, 34, 34);
}

span {
  line-height: 1.5;
}

.contain-body {
  color: rgb(49, 49, 49);
  margin-left: 10px;
}

 .free {
  color: red;
 }

 button {
    width: 100px;
    height: 30px;
    background: aliceblue;
    border: none;
    font-size: 16px;
    margin-top: 15px;
 }

 button:hover {
  color:  blue;
  cursor: pointer;
 }

</style>